<template>
    <div style="height: 100%;overflow-y: auto;overflow-x: hidden;">
        <div class="contenedor">
            <div class="pull-right">
                <span class="btn-white">{{ data.column }}</span>
            </div>
            <div class="header">
                <div class="text-muted" style="tex">{{ data.time }}</div>
                <h1 class="header-name" v-if="data.list?.isShow=='N'">{{ data.title }}</h1>
            </div>
            <!-- 具体内容 -->
            <div class="editor">
                <p v-if="!data.list?.textDescription?.length"></p>
                <p v-else id="editor" v-html="data.list?.textDescription"></p>
            </div>
            <!-- 附件 -->
            <div class="attachments" v-if="data.fileListNumber>0">
                <p class="header-file">{{ $t('webAuto.attachmentNum') }}  {{ data.fileListNumber }} - <span style="color:#337ab7">{{ $t('webAuto.PackageDownload') }} </span></p>
                <div class="file-list">
                    <div class="file-box" v-for="(item, index) in data.fileList" :key="index">
                        <p class="p-img" @click="viewFilesClick(item)"><img src="./img/flie.png" class="flie-img" /></p>
                        <div class="file-name">
                            <p class="updateFlie" @click="updateFlie(item)"> {{ item.name }}</p>
                            <div class="ng-binding">510.6K</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 發佈者 -->
            <div class="isPreview">
                <div class="row-title">
                    <div class="comentarios" v-if="data.number != 0"><el-icon style="margin-right:5px">
                            <ChatLineRound />
                        </el-icon>{{ $t('webAuto.commentNum') }}<span style="margin-left:10px">{{ data.number }}</span>
                    </div>
                    <div class="publicación"><el-icon style="margin-right:5px">
                            <UserFilled />
                        </el-icon>{{ $t('webAuto.Publisher') }}<span style="margin-left:10px"></span>{{ data.list.creator }}</div>
                    <!-- <div class="edit" ><span @click="editColumn">编辑</span></div> -->
                </div>
                <!-- 評論 -->
                <div class="review">
                    <h2 class="review-name">{{ $t('webAuto.comment') }}</h2>
                    <div style="margin-top:10px">
                        <el-input v-model="data.textarea" style="width: 100%" :rows="2" type="textarea"
                            :placeholder="$t('webAuto.CommentContent')" />
                    </div>
                    <div class="buttpns">
                        <el-button type="primary"
                            style="padding:0 8px;background-color: #D64445; border-color: #D64445;color: #FFFFFF;"
                            @click="reviewClick">{{ $t('webAuto.makeComment') }}</el-button>
                    </div>
                    <!-- 展示評論 -->
                    <div class="showComments" v-if="data.list?.sysHomePageRecords?.length">
                        <div class="showList" v-for="(item, index) in data.list.sysHomePageRecords" :key="index">
                            <div class="item">
                                <img class="img" src="./img/get.png" />
                                <div class="item-time">
                                    <p style="font-size:14px;color:#337ab7">{{ item.creator }}</p>
                                    <p style="font-size:10px;color:#888888">{{ item.commentDate }}</p>
                                </div>
                            </div>
                            <p class="specificInfor">{{ item.comment }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import homeApi from "@/api/home.js";
import uuid from "@/utils/uuid.js";
// import { $getRes } from "@/utils/index.js";
const { t } = useI18n();

const route = useRoute();
const router = useRouter();


const data = reactive({
    puuid: route.query.uuid,
    uuid: uuid(),
    column: '',
    title: '',
    time: '',
    list: {},
    number: 0,//评论的数量
    textarea: '',//评论内容,
    fileListNumber: 0,//附件
    fileList: []
})

onMounted(() => {
    // 获取文章详情
    column()
    homeApi.reviewAdd({
        uuid: data.uuid,
        puuid: data.puuid,
        type: 'read'
    }).then(res => {
        console.log(res.data)
    })
})

// 发表评论
const reviewClick = () => {
    homeApi.reviewAdd({
        uuid: data.uuid,
        puuid: data.puuid,
        type: 'comment',
        comment: data.textarea
    }).then(res => {
        console.log(res.data)
        data.textarea = ''
        column()
    })
}

// 获取内容详情
const column = () => {
    homeApi.readingLi(data.puuid).then(res => {
        data.column = res.data.puuid
        data.title = res.data.title
        data.time = res.data.created
        data.list = res.data
        data.number = res.data.sysHomePageRecords.length || 0
    }).catch(err => {
        console.log(err)
    })
    homeApi.getFileList(data.puuid).then(res => {
        // console.log(res.data.records)
        data.fileListNumber = res.data.records.length
        data.fileList = res.data.records

    }).catch(err => {
        console.log(err)
    })
}

// 下载附件
const updateFlie = (item) => {
    window.open(`${item.url}`, '_blank')
}
// 预览附件
const viewFilesClick = (item) => {
    console.log(item.suffix)
    if (item.suffix == "jpg" || item.suffix == "png" || item.suffix == "jpeg" || item.suffix == "gif") {
        let previewUrl = 'http://180.101.147.124:8012/onlinePreview?url=' + encodeURIComponent(base64Encode(
            `${item.url}?name=${item.name}`))
        window.open(previewUrl)
    } else {
        let previewUrl = 'http://180.101.147.124:8012/onlinePreview?url=' + encodeURIComponent(base64Encode(
            `${item.url}?name=${item.name}`))
        window.open(previewUrl)
    }
}

const base64Encode = (str) => {
    // console.log(str)
    // 将字符串转换为 Uint8Array
    const bytes = new TextEncoder().encode(str);
    // 使用 btoa() 方法进行 Base64 编码
    return btoa(String.fromCharCode.apply(null, bytes));
}
</script>

<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f3f3f4;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.contenedor {
    width: 1300px;
    padding: 0 40px 40px 40px;
    background: #fff;
    margin: 20px auto;
    min-height: 650px;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;

    @media(min-width: 1200px) {
        width: 1170px;
        height: auto;
        overflow-y: auto;
    }

    @media(min-width: 992px) {
        width: 970px;
        height: auto;
        overflow-y: auto;
    }

    @media(min-width: 768px) {
        width: 750px;
        overflow-y: auto;
    }
}

.pull-right {
    height: 40px;
    width: 100%;
    text-align: right;

    .btn-white {
        margin-top: 10px;
        display: inline-block;
        width: 60px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        color: #777171;
        background: white;
        border: 1px solid #e7eaec;
        border-radius: 3px;
        font-size: 13px;
    }
}

.header {
    margin: 0;
    text-align: center;
    padding: 0 20px;
    width: 100%;

    .text-muted {
        line-height: 20px;
        text-align: center;
        font-size: 13px;
        color: #888;
    }

    .header-name {
        font-size: 30px;
        margin: 5px 0 40px 0;
        font-weight: normal;
        color: #2F4050;
    }
}

.editor {
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;

    p,
    span {
        box-sizing: border-box;
        margin-top: 5px;
        white-space: normal;
        color: rgb(34, 34, 34);
        letter-spacing: 1px;
        background-color: rgb(255, 255, 255);
        text-indent: 2em;
        font-size: 16px;
        font-family: SimSun;
        line-height: 25px;
    }

    img {
        display: inline-block;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box;
    }
}

.isPreview {
    font-family: 微软雅黑;
    font-size: 13px;

    .row-title {
        text-align: right;
        margin-bottom: 20px;

        .comentarios {
            height: 20px;
        }

        .publicación {
            height: 20px;
        }

        .edit {
            height: 20px;
            color: #23527c;
        }
    }

    .review {
        margin-bottom: 40px;

        .review-name {
            font-weight: 300;
            font-size: 24px;
            margin: 5px 0 0 0;
        }

        .buttpns {
            margin-top: 15px;
            text-align: right;
        }
    }

    .showComments {
        margin-top: 15px;
        border: 1px solid #e7eaec;
        padding: 15px;

        .showList {
            min-height: 65px;
            height: auto;
            text-align: left;

            .item {
                display: flex;
                flex-direction: row;

                .img {
                    height: 40px;
                    width: 40px;
                    margin-right: 10px;
                }

                .item-time {
                    flex: 1;
                    line-height: 23px;
                }
            }

            .specificInfor {
                font-size: 13px;
                line-height: 18px;
                margin-bottom: 10px;
                word-wrap: normal;
            }
        }
    }
}

// 附件
.attachments {
    border-top: 1px solid #e7eaec;
    padding: 20px;
    font-size: 12px;

    .header-file {
        font-size: 15px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .file-list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .file-box {
            width: 160px;
            height: 140px;
            border: 1px solid #e7eaec;
            padding: 0;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            margin-right: 20px;

            .p-img {
                width: 100%;
                height: 80px;
                text-align: center;

                .flie-img {
                    width: 60px;
                    height: 60px;
                    margin-top: 10px;
                }
            }

            .file-name {
                padding: 5px 10px;
                background-color: #f8f8f8;
                border-top: 1px solid #e7eaec;
                flex: 1;
                display: flex;
                flex-direction: column;

                .updateFlie {
                    flex: 1;
                    color: #337ab7;
                    text-align: left;
                    word-wrap: break-word;
                    /* 允许在长单词或无空格处断开单词 */
                    overflow: hidden;
                    box-sizing: border-box;
                    line-height: 15px !important;
                }

                .updateFlie:hover {
                    cursor: pointer;
                }

                .ng-binding {
                    line-height: 12px;
                    width: 100%;
                    color: #676a6c;
                    font-size: 10px;
                }
            }
        }
    }
}
</style>
